<template>
  <a-spin :spinning="loading">
    <div class="px-20 py-10 bg-white over">
      <!-- <a-tabs :animated="false" v-model="priceKey" @change="storeInfo">
        <a-tab-pane key="dayPrice" tab="取消政策">
         
        </a-tab-pane>
        <a-tab-pane key="specialPrice" tab="租车政策">
          
        </a-tab-pane>

      </a-tabs>
      <div class="w3">123</div> -->
      <section class="form-item block">
        <section v-if="$permissionJudge('CancelStrategyManager')" class="mb-20 label font-bold w-auto flex">
          取消政策：
          <section class="tbtitle" v-if="typename !== ''">
            <span>{{ typename }}</span>
          </section>
        </section>
        <a-table
          v-if="$permissionJudge('CancelStrategyManager')"
          class="mt-16"
          :columns="columns"
          :data-source="storedata"
          :pagination="pagination"
        >
          <template #time="val, storedata">
            <section class="text-14" v-if="storedata.isSpecialTime">
              {{ storedata.startTime }}至{{ storedata.endTime }}
            </section>
            <section class="text-14" v-if="!storedata.isSpecialTime">日常使用</section>
            <section class="text-14">
              {{ storedata.isSpecialTime ? storedata.specialTimeName : '除特殊指定的时间外适用' }}
            </section>
          </template>
          <template #cancelRules="val, storedata">
            <section v-for="(item, index) in storedata.cancelRules">
              <!-- <section class="text-14">取车时间{{ item.hours }},{{ item.fee }}</section> -->
              <!-- <section class="text-14">{{item.hours>0?取车时间前item.hours个小时内取消，需支付预定金额的80%为取消费用:取车时间之后取消，需支付预定金额的item.fee%为取消费用}}</section> -->
              <section class="text-14 w-auto" v-if="item.hours >= 0">
                取车时间{{ item.hours }}个小时前取消，需支付预定金额的{{ item.fee }}%为取消费用
              </section>
              <section class="text-14 w-auto" v-if="item.hours < 0">
                取车时间之后取消，需支付预定金额的{{ item.fee }}%为取消费用
              </section>
            </section>
          </template>
        </a-table>
        <!-- <section class="mt-30 mb-20 label w-auto">
          <section class="strategy-info info">
            <a-row type="flex" :gutter="16" v-if="strategyInfo">
              <a-col :span="24">
                <section class="form-item block">
                  <section class="mb-16 label font-bold w-auto">取车材料：</section>
                </section>
              </a-col>
              <a-col :span="12">
                <section class="form-item">
                  <section class="">预订可采用证件类型：{{ credentialTypeNames }}</section>
                </section>
              </a-col>
              <a-col :span="12">
                <section class="form-item">
                  <section class="label">证件有效期(月)：{{ strategyInfo.credentialValidityMonth }}</section>
                </section>
              </a-col>
              <a-col :span="12">
                <section class="form-item mt-8 mb-8">
                  <section class="label">押金支付方式：{{ depositPayTypeNames }}</section>
                </section>
              </a-col>
              <a-col :span="12">
                <section class="form-item mt-8 mb-8">
                  <section class="label">信用卡有效期(月)：{{ strategyInfo.creditCardValidityMonth }}</section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">最小驾龄要求(月)：{{ strategyInfo.minDriveAgeRequirementsMonth }}</section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">驾照有效期(月)：{{ strategyInfo.driveValidityMonth }}</section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">
                    驾驶人年龄要求：{{ strategyInfo.driveAgeStartRequirements }}至{{
                      strategyInfo.driveAgeEndRequirements
                    }}
                  </section>
                </section>
              </a-col>
              <a-col :span="24">
                <section class="form-item block">
                  <section class="mb-8 label font-bold mt-16 w-auto">禁行要求：</section>
                </section>
              </a-col>
              <a-col :span="24">
                <section class="form-item">
                  <section class="label">车辆禁止行为：{{ strategyInfo.banAction }}</section>
                </section>
              </a-col>
              <a-col :span="24">
                <section class="form-item">
                  <section class="label">车辆禁止进入区域：{{ strategyInfo.banArea }}</section>
                </section>
              </a-col>
              <a-col :span="24">
                <section class="form-item block">
                  <section class="mb-8 label font-bold mt-16 w-auto">油费与加油服务费：</section>
                </section>
              </a-col>
              <a-col :span="24">
                <section class="form-item">
                  <section class="label">加油服务费：{{ strategyInfo.refuelingFee }}元/次</section>
                </section>
              </a-col>
              <a-col :span="24">
                <section class="form-item block">
                  <section class="mb-8 label font-bold mt-16 w-auto">提前还车：</section>
                </section>
              </a-col>
              <a-col :span="12">
                <section class="form-item mb-8">
                  <section class="label">
                    日常提前还车联系提前小时数：{{ strategyInfo.usualReturnCarAdvanceTime }}
                  </section>
                </section>
              </a-col>
              <a-col :span="12">
                <section class="form-item mb-8">
                  <section class="label">
                    日常提前还车是否退费：{{ strategyInfo.usualReturnCarRefund ? '退费' : '不退费' }}
                  </section>
                </section>
              </a-col>
              <a-col :span="12">
                <section class="form-item">
                  <section class="label">
                    节假日提前还车联系提前小时数：{{ strategyInfo.holidayReturnCarAdvanceTime }}
                  </section>
                </section>
              </a-col>
              <a-col :span="12">
                <section class="form-item">
                  <section class="label">
                    节假日提前还车是否退费：{{ strategyInfo.holidayReturnCarRefund ? '退费' : '不退费' }}
                  </section>
                </section>
              </a-col>
              <a-col :span="24">
                <section class="form-item block">
                  <section class="mb-8 label font-bold mt-16 w-auto">续租/延迟还车：</section>
                </section>
              </a-col>
              <a-col :span="12">
                <section class="form-item">
                  <section class="label">续租提前还车联系提前小时数：{{ strategyInfo.renewalAdvanceTime }}</section>
                </section>
              </a-col>
              <a-col :span="12">
                <section class="form-item">
                  <section class="label">超期违约金占首日租金比例（%）：{{ strategyInfo.timeoutFeeRatio }}</section>
                </section>
              </a-col>
              <a-col :span="24">
                <section class="form-item block">
                  <section class="mb-8 label font-bold mt-16 w-auto">车辆维护：</section>
                </section>
              </a-col>
              <a-col :span="24">
                <section class="form-item">
                  <section class="label">
                    停运费按维修总金额一定比例收取(%)：{{ strategyInfo.outActionFeeRatio }}
                  </section>
                </section>
              </a-col>
              <a-col :span="24">
                <section class="form-item block">
                  <section class="mb-8 label font-bold mt-16 w-auto">违章处理：</section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">行驶证借用押金(元每次)：{{ strategyInfo.drivingLicenseDeposit }}</section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">行驶证借用免费时间(小时)：{{ strategyInfo.drivingLicenseFreeTime }}</section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">行驶证借用费用：{{ strategyInfo.drivingLicenseFee }}元/天</section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item mt-8 mb-8">
                  <section class="label">消除违章约定期限：{{ strategyInfo.eliminateViolationsDay }}天</section>
                </section>
              </a-col>

              <a-col :span="8">
                <section class="form-item mt-8 mb-8">
                  <section class="label">
                    违章无扣分时单条罚款金额(元)：{{ strategyInfo.violationNotDeductPointsSingleFine }}
                  </section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item mt-8 mb-8">
                  <section class="label">
                    违章扣低于12分时单条罚款金额(元)：{{ strategyInfo.violationDeductPointsLessThan12SingleFine }}
                  </section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">
                    违章扣低于12分时每分罚款金额(元)：{{ strategyInfo.violationDeductPointsLessThan12SinglePointFine }}
                  </section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">
                    违章扣等于12分时单条罚款金额(元)：{{ strategyInfo.violationDeductPointsEqual12SingleFine }}
                  </section>
                </section>
              </a-col>
              <a-col :span="8">
                <section class="form-item">
                  <section class="label">
                    违章扣等于12分时全部罚款金额(元)：{{ strategyInfo.violationDeductPointsEqual12AllPointFine }}
                  </section>
                </section>
              </a-col>
            </a-row>
          </section>
        </section> -->

        <section class="mt-30 mb-20 label font-bold w-auto">
          <section>租车须知：</section>
          <a-table :columns="moreTipsColumns" :data-source="rentCarTipsInfo || []" :pagination="false">
            <!-- <template #dataTitle="title, record">
              <section class="mb-8">{{ title }}</section>
              <section style="color: #999">{{ record.content }}</section>
            </template>
            <template #rentCarTips="title, record">
              <section v-for="item in record.tipsDetails" :key="index">
                <section class="font-bold">
                  {{ item.title }}
                </section>
                <section style="color: #999">
                  {{ item.content }}
                </section>
              </section>
            </template> -->
          </a-table>
        </section>
      </section>
    </div>
  </a-spin>
</template>

<script>
import { getRuleList, getStoreDetail, getRentalcarPolicyConfig, rentCarTips } from '@/api/store/index'
import { tableMixins } from '@/utils/mixins'
export default {
  mixins: [tableMixins],
  components: {},
  props: {
    storeId2: {
      type: Number,
    },
  },
  data() {
    return {
      loading: false, // 是否在加载中
      pageNum: 1,
      rowsNum: 10,
      storedata: [],
      columns: [
        { dataIndex: 'time', title: '取消适用时间', align: 'center', scopedSlots: { customRender: 'time' } },
        { dataIndex: 'cancelFeeText', title: '取消费用收取方式', align: 'center' },
        {
          dataIndex: 'cancelRules',
          title: '具体费用规则',
          align: 'center',
          width: 300,
          scopedSlots: { customRender: 'cancelRules' },
        },
      ],
      cancelStrategyId: '',
      strategyInfo: {},
      credentialTypeEnums: [],
      depositPayTypeEnums: [],
      rentCarTipsInfo: [],
      rentCarTipsInfo2: [],
      moreTipsColumns: [
        { title: '类型', width: '50%', dataIndex: 'title', scopedSlots: { customRender: 'title' } },
        { title: '须知内容', width: '50%', dataIndex: 'description', scopedSlots: { customRender: 'description' } },
      ],
      storeType: '',
      typename: '',
    }
  },
  computed: {
    credentialTypeNames() {
      const credentialType = this.strategyInfo.credentialType
      console.log(credentialType)
      if (!credentialType) return
      return (
        credentialType
          // .split(',')
          .filter((e) => {
            return this.credentialTypeEnums.find((item) => +e === item.value)
          })
          .map((e) => this.credentialTypeEnums.find((item) => +e === item.value).name)
          .join(',')
      )
    },
    depositPayTypeNames() {
      // if (!this.strategyInfo) return
      const depositPayType = this.strategyInfo.depositPayType
      console.log(depositPayType)
      if (!depositPayType) return
      return (
        depositPayType
          // .split(',')
          .filter((e) => {
            return this.depositPayTypeEnums.find((item) => +e === item.value)
          })
          .map((e) => this.depositPayTypeEnums.find((item) => +e === item.value).name)
          .join(',')
      )
    },
  },
  watch: {},
  async created() {
    await this.$utils.getDictList('CancelStrategyType').then((res) => {
      //取消规则类型
      this.typeList = res
      console.log(this.typeList)
      // this._getStoreDetail()
    })
    await this.$utils.getDictList('CancelType').then((res) => {
      this.cancelTypeList = res
    })
    this.credentialTypeEnums = await this.$utils.getDictList('CredentialType')
    this.depositPayTypeEnums = await this.$utils.getDictList('DepositPayType')
  },
  mounted() {},
  destroyed() {},
  methods: {
    getData() {
      this.loading = true
      return getRuleList({
        pageNo: this.pageNum,
        pageSize: this.rowsNum,
        type: this.storeType !== '' ? this.storeType : undefined,
      })
        .then((data) => {
          console.log(data)
          data.items.map((v) => {
            this.cancelTypeList.map((j) => {
              if (v.cancelFeeType == j.value) {
                v.cancelFeeText = j.name
              }
            })
          })
          this.storedata = data.items
          this.total = data.rowCount
        })
        .finally(() => (this.loading = false))
    },
    _getStoreDetail() {
      // 门店详情
      return new Promise((resolve, reject) => {
        getStoreDetail({
          storeId: this.storeId2, // 门店id
        })
          .then((res) => {
            this.storeType = res.cancelStrategyType
            this.typeList.map((v) => {
              if (v.value === this.storeType) {
                this.typename = v.name
              } else if (this.storeType == 0) {
                this.typename = ''
              }
            })
            console.log(123)
            if (this.$permissionJudge('CancelStrategyManager')) {
              this.getData()
            }

            // this.getRentalConfig()
            this.getrentCarTips()
            resolve()
          })
          .finally(() => {
            this.loading = false
          })
      })
    },
    // 租车政策
    getRentalConfig() {
		return
      return new Promise((resolve, reject) => {
        getRentalcarPolicyConfig({
          storeId: this.storeId2, // 门店id
        })
          .then((res) => {
            this.strategyInfo = res
            console.log(res)
            resolve()
          })
          .finally(() => {
            this.loading = false
          })
      })
    },
    getrentCarTips() {
      return new Promise((resolve, reject) => {
        rentCarTips({
          storeId: this.storeId2, // 门店id
        })
          .then((res) => {
            this.rentCarTipsInfo = res
            // this.rentCarTipsInfo2 = res.tipsDetails
            console.log(res)
            resolve()
          })
          .finally(() => {
            this.loading = false
          })
      })
    },
  },
}
</script>
<style scoped lang='less'>
.over {
  overflow-y: scroll;
  min-height: calc(100vh - 360px);
  max-height: calc(100vh - 260px);
}
.tbtitle {
  font-size: 10px;
  background-color: rgba(2, 167, 240, 1);
  color: #fff;
  // padding: 8px;
  height: 20px;
  font-weight: normal;
  width: 6%;
  line-height: 20px;
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
}
</style>
